<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Index - Visible Bootstrap Template</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Mukta:wght@200;300;400;500;600;700;800&family=Abel:wght@400&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Visible
  * Template URL: https://bootstrapmade.com/visible-bootstrap-agency-template/
  * Updated: May 22 2025 with Bootstrap v5.3.6
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="index-page">

  <header id="header" class="header d-flex align-items-center position-relative">
    <div class="container-fluid position-relative d-flex align-items-center justify-content-between">

      <a href="index.html" class="logo d-flex align-items-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <!-- <img src="assets/img/logo.webp" alt=""> -->
        <h1 class="sitename">Visible</h1>
      </a>

      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="#hero" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#team">Team</a></li>
          <li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
              <li><a href="#">Dropdown 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                <ul>
                  <li><a href="#">Deep Dropdown 1</a></li>
                  <li><a href="#">Deep Dropdown 2</a></li>
                  <li><a href="#">Deep Dropdown 3</a></li>
                  <li><a href="#">Deep Dropdown 4</a></li>
                  <li><a href="#">Deep Dropdown 5</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown 2</a></li>
              <li><a href="#">Dropdown 3</a></li>
              <li><a href="#">Dropdown 4</a></li>
            </ul>
          </li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

    </div>
  </header>

  <main class="main">

    <!-- Hero Section -->
    <section id="hero" class="hero section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 hero-content" data-aos="fade-up" data-aos-delay="100">
            <div class="subtitle">
              <span>DESIGN STUDIO</span>
            </div>

            <h1 class="title">
              INSPIRE <span class="highlight">THROUGH</span> DESIGN
            </h1>

            <div class="description">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae fermentum risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin egestas, urna at rhoncus gravida.</p>
            </div>

            <div class="hero-buttons">
              <a href="#services" class="primary-btn">
                Our Services
                <i class="bi bi-chevron-right"></i>
              </a>
              <a href="#portfolio" class="secondary-btn">
                View Portfolio
              </a>
            </div>
          </div>

          <div class="col-lg-6 hero-visual" data-aos="fade-up" data-aos-delay="200">
            <div class="image-wrapper">
              <img src="assets/img/misc/misc-square-16.webp" alt="Creative Design" class="main-image">

              <div class="floating-element top-left">
                <i class="bi bi-star-fill"></i>
              </div>

              <div class="floating-element bottom-right">
                <i class="bi bi-circle-fill"></i>
              </div>

              <div class="experience-badge">
                <span class="years">10+</span>
                <span class="text">Years of Experience</span>
              </div>
            </div>

            <div class="client-counter">
              <div class="counter-number">
                <span>750+</span>
              </div>
              <div class="counter-text">
                <span>Happy Clients</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section><!-- /Hero Section -->

    <!-- About Section -->
    <section id="about" class="about section light-background">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">About</span>
        <h2>About</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row align-items-center gy-5">
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="about-image-wrapper position-relative">
              <img src="assets/img/about/about-8.webp" alt="About Us" class="img-fluid rounded-4">
              <div class="mission-card">
                <div class="mission-icon">
                  <i class="bi bi-lightbulb"></i>
                </div>
                <div class="mission-content">
                  <h4>Our Purpose</h4>
                  <p>Focus on delivering creative solutions that empower businesses to grow and succeed.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
            <div class="about-content ps-lg-4">
              <div class="tag-badge" data-aos="fade-up" data-aos-delay="100">COMPANY OVERVIEW</div>
              <h2 class="mb-4" data-aos="fade-up" data-aos-delay="200">Discover our journey and future aspirations towards innovation and success</h2>

              <div class="about-info" data-aos="fade-up" data-aos-delay="300">
                <p>Explore how we have developed our unique approach to tackle complex challenges and provide exceptional service across various industries. Our dedicated team works tirelessly to ensure client satisfaction.</p>
                <p>Through continuous learning and adaptation, we strive to stay at the forefront of technology and market trends, ensuring our solutions are always relevant and effective.</p>
              </div>

              <h4 class="values-title mt-4 mb-3" data-aos="fade-up" data-aos-delay="400">Fundamental Principles</h4>

              <div class="values-list" data-aos="fade-up" data-aos-delay="500">
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Trustworthiness</span>
                </div>
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Quality</span>
                </div>
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Creativity</span>
                </div>
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Response</span>
                </div>
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Collaboration</span>
                </div>
                <div class="value-item">
                  <div class="value-icon"><i class="bi bi-check2"></i></div>
                  <span class="value-text">Growth Mindset</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /About Section -->

    <!-- Stats Section -->
    <section id="stats" class="stats section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row justify-content-center">
          <div class="col-lg-10">
            <div class="stats-wrapper">
              <div class="stats-item" data-aos="zoom-in" data-aos-delay="150">
                <div class="icon-wrapper">
                  <i class="bi bi-emoji-smile"></i>
                </div>
                <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
                <p>Happy Clients</p>
              </div><!-- End Stats Item -->

              <div class="stats-item" data-aos="zoom-in" data-aos-delay="200">
                <div class="icon-wrapper">
                  <i class="bi bi-journal-richtext"></i>
                </div>
                <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span>
                <p>Projects</p>
              </div><!-- End Stats Item -->

              <div class="stats-item" data-aos="zoom-in" data-aos-delay="250">
                <div class="icon-wrapper">
                  <i class="bi bi-headset"></i>
                </div>
                <span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1" class="purecounter"></span>
                <p>Hours Of Support</p>
              </div><!-- End Stats Item -->

              <div class="stats-item" data-aos="zoom-in" data-aos-delay="300">
                <div class="icon-wrapper">
                  <i class="bi bi-people"></i>
                </div>
                <span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
                <p>Hard Workers</p>
              </div><!-- End Stats Item -->
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Stats Section -->

    <!-- Services Section -->
    <section id="services" class="services section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Services</span>
        <h2>Services</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="services-header">
          <div class="row">
            <div class="col-lg-9" data-aos="fade-right">
              <div class="services-intro">
                <div class="services-tag">Strategic Consulting</div>
                <h2>Transform Your Business With Expert Consulting Solutions</h2>
                <p>We help organizations navigate complex challenges, identify growth opportunities, and implement effective strategies to achieve sustainable success in today's competitive landscape.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula metus at libero finibus, in egestas nibh imperdiet. Proin condimentum fermentum ex, vitae malesuada risus scelerisque eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec gravida vestibulum ante, eget faucibus magna pulvinar vel. Cras consectetur ornare lectus, nec volutpat enim accumsan vel. Fusce facilisis sagittis purus, non malesuada augue dignissim ut. Integer scelerisque nibh quis diam pharetra, id ullamcorper ligula finibus.</p>
              </div>
            </div>
            <div class="col-lg-3" data-aos="fade-left">
              <div class="services-stats">
                <div class="stat-item">
                  <span class="stat-number">500+</span>
                  <span class="stat-label">Projects Completed</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">98%</span>
                  <span class="stat-label">Client Satisfaction</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">15+</span>
                  <span class="stat-label">Years Experience</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row g-4">
          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="service-card">
              <div class="service-card-inner">
                <div class="service-icon">
                  <i class="bi bi-lightbulb"></i>
                </div>
                <h3>Strategy Development</h3>
                <p>Develop comprehensive business strategies aligned with your vision, market dynamics, and organizational capabilities to drive sustainable growth.</p>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="service-card">
              <div class="service-card-inner">
                <div class="service-icon">
                  <i class="bi bi-bar-chart"></i>
                </div>
                <h3>Performance Optimization</h3>
                <p>Identify operational inefficiencies and implement targeted improvements to enhance productivity, reduce costs, and maximize business performance.</p>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="service-card">
              <div class="service-card-inner">
                <div class="service-icon">
                  <i class="bi bi-people"></i>
                </div>
                <h3>Organizational Development</h3>
                <p>Build high-performing teams and effective organizational structures that foster innovation, collaboration, and adaptability in changing markets.</p>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="service-card">
              <div class="service-card-inner">
                <div class="service-icon">
                  <i class="bi bi-graph-up-arrow"></i>
                </div>
                <h3>Market Expansion</h3>
                <p>Identify and capitalize on new market opportunities through data-driven analysis, competitive intelligence, and strategic entry planning.</p>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Services Section -->

    <!-- Features Section -->
    <section id="features" class="features section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Features</span>
        <h2>Features</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="features-overview">
          <div class="main-heading" data-aos="fade-right" data-aos-delay="200">
            <h2>Integrated Business Framework</h2>
            <p>Leveraging cutting-edge technology provides the foundation for comprehensive operational excellence across all your divisions.</p>
            <p>Our robust architecture seamlessly integrates diverse systems, streamlining workflows and boosting productivity to unprecedented levels.</p>
            <p>Gain actionable insights through sophisticated analytics and reporting tools, empowering informed decision-making at every turn.</p>
            <p>Experience enhanced efficiency and scalability designed to grow with your evolving business demands</p>
            <div class="achievement-badges">
              <div class="achievement">
                <span class="achievement-icon">
                  <i class="bi bi-shield-check"></i>
                </span>
                <div class="achievement-info">
                  <span class="achievement-value">95%</span>
                  <span class="achievement-label">Client Retention</span>
                </div>
              </div>
              <div class="achievement">
                <span class="achievement-icon">
                  <i class="bi bi-clock-history"></i>
                </span>
                <div class="achievement-info">
                  <span class="achievement-value">Around-the-Clock</span>
                  <span class="achievement-label">Dedicated Support</span>
                </div>
              </div>
            </div>
          </div>

          <div class="features-card-wrapper" data-aos="fade-left" data-aos-delay="300">
            <div class="features-row">
              <div class="feature-card feature-primary" data-aos="zoom-in" data-aos-delay="200">
                <div class="feature-icon">
                  <i class="bi bi-shield-lock"></i>
                </div>
                <div class="feature-details">
                  <h3>Fortified Digital Security</h3>
                  <p>Secure your critical assets with our advanced, multi-layered security protocols.</p>
                  <div class="feature-status active">
                    <span class="status-indicator"></span>
                    <span class="status-text">Deployed</span>
                  </div>
                </div>
              </div>

              <div class="feature-card" data-aos="zoom-in" data-aos-delay="300">
                <div class="feature-icon">
                  <i class="bi bi-cloud-arrow-up"></i>
                </div>
                <div class="feature-details">
                  <h3>Seamless Cloud Migration</h3>
                  <p>Migrate your operations effortlessly to the cloud for enhanced flexibility and access.</p>
                  <div class="feature-status pending">
                    <span class="status-indicator"></span>
                    <span class="status-text">In Development</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="features-row">
              <div class="feature-card" data-aos="zoom-in" data-aos-delay="400">
                <div class="feature-icon">
                  <i class="bi bi-database-check"></i>
                </div>
                <div class="feature-details">
                  <h3>Superior Data Governance</h3>
                  <p>Manage and protect your data with robust compliance and integrity measures.</p>
                  <div class="feature-status active">
                    <span class="status-indicator"></span>
                    <span class="status-text">Operational</span>
                  </div>
                </div>
              </div>

              <div class="feature-card" data-aos="zoom-in" data-aos-delay="500">
                <div class="feature-icon">
                  <i class="bi bi-cpu"></i>
                </div>
                <div class="feature-details">
                  <h3>Intelligent Automation</h3>
                  <p>Automate complex processes and drive innovation with AI-powered insights.</p>
                  <div class="feature-status scheduled">
                    <span class="status-indicator"></span>
                    <span class="status-text">Scheduled</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="additional-features" data-aos="fade-up" data-aos-delay="100">
          <div class="row gx-4 gy-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
              <div class="additional-feature-card">
                <div class="icon-container">
                  <i class="bi bi-gear-wide-connected"></i>
                </div>
                <h4>Workflow Optimization</h4>
                <p>Streamline your daily operations through intelligent, automated workflow solutions.</p>
                <div class="feature-tag active">
                  <i class="bi bi-check-circle"></i> Active
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
              <div class="additional-feature-card">
                <div class="icon-container">
                  <i class="bi bi-bar-chart-line"></i>
                </div>
                <h4>Performance Monitoring</h4>
                <p>Monitor key metrics and identify growth opportunities with detailed performance analytics.</p>
                <div class="feature-tag pending">
                  <i class="bi bi-arrow-repeat"></i> Pending
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
              <div class="additional-feature-card">
                <div class="icon-container">
                  <i class="bi bi-graph-up-arrow"></i>
                </div>
                <h4>Strategic Growth</h4>
                <p>Develop strategies and implement tactics for achieving sustainable revenue expansion.</p>
                <div class="feature-tag scheduled">
                  <i class="bi bi-calendar-check"></i> Planned
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </section><!-- /Features Section -->

    <!-- Features Alt Section -->
    <section id="features-alt" class="features-alt section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row g-4">
          <div class="col-lg-4">
            <ul class="nav nav-tabs flex-column" role="tablist" data-aos="fade-right" data-aos-delay="200">
              <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#features-alt-tab-1" role="tab">
                  <div class="d-flex align-items-center">
                    <div class="icon-box">
                      <i class="bi bi-people"></i>
                    </div>
                    <div class="ms-3">
                      <h4>Vestibulum ante ipsum</h4>
                      <p>Proin iaculis purus consequat</p>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-alt-tab-2" role="tab">
                  <div class="d-flex align-items-center">
                    <div class="icon-box">
                      <i class="bi bi-heart"></i>
                    </div>
                    <div class="ms-3">
                      <h4>Curabitur aliquet quam</h4>
                      <p>Nulla quis lorem ut libero</p>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-alt-tab-3" role="tab">
                  <div class="d-flex align-items-center">
                    <div class="icon-box">
                      <i class="bi bi-house-heart"></i>
                    </div>
                    <div class="ms-3">
                      <h4>Luna stride flared</h4>
                      <p>Sed ut perspiciatis unde omnis</p>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-alt-tab-4" role="tab">
                  <div class="d-flex align-items-center">
                    <div class="icon-box">
                      <i class="bi bi-person-heart"></i>
                    </div>
                    <div class="ms-3">
                      <h4>Quisque Velit Nisi</h4>
                      <p>Duis aute irure dolor in</p>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-alt-tab-5" role="tab">
                  <div class="d-flex align-items-center">
                    <div class="icon-box">
                      <i class="bi bi-briefcase"></i>
                    </div>
                    <div class="ms-3">
                      <h4>Curabitur Aliquet</h4>
                      <p>Excepteur sint occaecat cupidatat</p>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>

          <div class="col-lg-8">
            <div class="tab-content" data-aos="fade-up" data-aos-delay="300">
              <div class="tab-pane fade active show" id="features-alt-tab-1" role="tabpanel">
                <div class="content-box">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <h3>Nullam Lacinia Consectetur</h3>
                      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit
                        neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p>
                      <p class="highlight">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam
                        sit amet quam vehicula elementum sed sit amet dui.</p>
                      <ul class="features-list">
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Curabitur aliquet quam id dui posuere blandit</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Nulla quis lorem ut libero malesuada feugiat</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vestibulum ac diam sit amet quam vehicula</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Donec rutrum congue leo eget malesuada</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-lg-6">
                      <div class="image-box">
                        <img src="assets/img/misc/misc-square-6.webp" alt="" class="img-fluid" loading="lazy">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane fade" id="features-alt-tab-2" role="tabpanel">
                <div class="content-box">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <h3>Sed Porttitor Lectus Nibh</h3>
                      <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus.
                        Vestibulum ante ipsum primis in faucibus.</p>
                      <p class="highlight">Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero
                        malesuada feugiat.</p>
                      <ul class="features-list">
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vivamus suscipit tortor eget felis porttitor</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Curabitur aliquet quam id dui posuere</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Nulla quis lorem ut libero malesuada</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vestibulum ac diam sit amet quam</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-lg-6">
                      <div class="image-box">
                        <img src="assets/img/misc/misc-square-13.webp" alt="" class="img-fluid" loading="lazy">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane fade" id="features-alt-tab-3" role="tabpanel">
                <div class="content-box">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <h3>Praesent Sapien Massa</h3>
                      <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in
                        faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                      <p class="highlight">Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula
                        elementum sed sit amet dui.</p>
                      <ul class="features-list">
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Curabitur non nulla sit amet nisl</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vestibulum ac diam sit amet quam</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Donec rutrum congue leo eget</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Nulla quis lorem ut libero</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-lg-6">
                      <div class="image-box">
                        <img src="assets/img/misc/misc-square-3.webp" alt="" class="img-fluid" loading="lazy">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane fade" id="features-alt-tab-4" role="tabpanel">
                <div class="content-box">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <h3>Curabitur Aliquet Quam</h3>
                      <p>Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                        amet dui. Curabitur aliquet quam id dui posuere blandit.</p>
                      <p class="highlight">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur
                        non nulla sit amet nisl tempus.</p>
                      <ul class="features-list">
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Nulla quis lorem ut libero malesuada</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Curabitur aliquet quam id dui</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vestibulum ac diam sit amet</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Donec rutrum congue leo</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-lg-6">
                      <div class="image-box">
                        <img src="assets/img/misc/misc-square-5.webp" alt="" class="img-fluid" loading="lazy">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane fade" id="features-alt-tab-5" role="tabpanel">
                <div class="content-box">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <h3>Vestibulum Ante Ipsum</h3>
                      <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut
                        lacinia in, elementum id enim.</p>
                      <p class="highlight">Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula
                        elementum sed sit amet dui.</p>
                      <ul class="features-list">
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vivamus suscipit tortor eget felis</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Curabitur aliquet quam id dui</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Nulla quis lorem ut libero</span>
                        </li>
                        <li>
                          <i class="bi bi-check2-circle"></i>
                          <span>Vestibulum ac diam sit amet</span>
                        </li>
                      </ul>
                    </div>
                    <div class="col-lg-6">
                      <div class="image-box">
                        <img src="assets/img/misc/misc-square-3.webp" alt="" class="img-fluid" loading="lazy">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section><!-- /Features Alt Section -->

    <!-- Call To Action Section -->
    <section id="call-to-action" class="call-to-action section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="cta-wrapper">
          <div class="cta-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
          </div>

          <div class="row g-0">
            <div class="col-lg-7">
              <div class="cta-content p-5" data-aos="fade-right" data-aos-delay="200">
                <span class="badge-custom" data-aos="zoom-in" data-aos-delay="300">Premium Offer</span>
                <h2 class="mt-4 mb-4">Transform Your Experience With Our Solution</h2>
                <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

                <div class="row benefits-row mb-5">
                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="benefit-item">
                      <div class="icon-box">
                        <i class="bi bi-lightning-charge-fill"></i>
                      </div>
                      <div class="benefit-content">
                        <h5>Quick Setup</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-delay="500">
                    <div class="benefit-item">
                      <div class="icon-box">
                        <i class="bi bi-shield-check"></i>
                      </div>
                      <div class="benefit-content">
                        <h5>Full Security</h5>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="action-buttons">
                  <a href="#" class="btn btn-primary" data-aos="fade-up" data-aos-delay="600">Start Now</a>
                  <a href="#" class="btn btn-outline" data-aos="fade-up" data-aos-delay="700">Learn More</a>
                  <div class="guarantee-badge" data-aos="fade-up" data-aos-delay="800">
                    <i class="bi bi-patch-check-fill"></i>
                    <span>30-Day Money Back</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-5">
              <div class="cta-image-container" data-aos="zoom-in" data-aos-delay="300">
                <img src="assets/img/illustration/illustration-3.webp" alt="Illustration" class="img-fluid main-image">
                <div class="floating-element element-1">
                  <i class="bi bi-star-fill"></i>
                  <span>4.9 Rating</span>
                </div>
                <div class="floating-element element-2">
                  <i class="bi bi-people-fill"></i>
                  <span>10k+ Users</span>
                </div>
                <div class="pattern-dots"></div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Call To Action Section -->

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Portfolio</span>
        <h2>Portfolio</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

          <div class="row">
            <div class="col-lg-3 filter-sidebar">
              <div class="filters-wrapper" data-aos="fade-right" data-aos-delay="150">
                <ul class="portfolio-filters isotope-filters">
                  <li data-filter="*" class="filter-active">All Projects</li>
                  <li data-filter=".filter-photography">Photography</li>
                  <li data-filter=".filter-design">Design</li>
                  <li data-filter=".filter-automotive">Automotive</li>
                  <li data-filter=".filter-nature">Nature</li>
                </ul>
              </div>
            </div>

            <div class="col-lg-9">
              <div class="row gy-4 portfolio-container isotope-container" data-aos="fade-up" data-aos-delay="200">

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-photography">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-portrait-1.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Photography</span>
                        <h4>Capturing Moments</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-portrait-1.webp" class="glightbox" title="Capturing Moments"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-design">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-2.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Web Design</span>
                        <h4>Woodcraft Design</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-2.webp" class="glightbox" title="Woodcraft Design"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-automotive">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-portrait-2.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Automotive</span>
                        <h4>Classic Beauty</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-portrait-2.webp" class="glightbox" title="Classic Beauty"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-nature">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-portrait-4.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Nature</span>
                        <h4>Natural Growth</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-portrait-4.webp" class="glightbox" title="Natural Growth"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-photography">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-5.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Photography</span>
                        <h4>Urban Stories</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-5.webp" class="glightbox" title="Urban Stories"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

                <div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-design">
                  <div class="portfolio-wrap">
                    <img src="assets/img/portfolio/portfolio-6.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
                    <div class="portfolio-info">
                      <div class="content">
                        <span class="category">Web Design</span>
                        <h4>Digital Experience</h4>
                        <div class="portfolio-links">
                          <a href="assets/img/portfolio/portfolio-6.webp" class="glightbox" title="Digital Experience"><i class="bi bi-plus-lg"></i></a>
                          <a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- End Portfolio Item -->

              </div><!-- End Portfolio Container -->
            </div>
          </div>

        </div>

      </div>

    </section><!-- /Portfolio Section -->

    <!-- Pricing Section -->
    <section id="pricing" class="pricing section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Pricing</span>
        <h2>Pricing</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4 justify-content-center">

          <!-- Basic Plan -->
          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="pricing-item">
              <div class="pricing-icon">
                <i class="bi bi-star"></i>
              </div>
              <h3>Standard</h3>
              <div class="price">
                <span class="currency">$</span>9<span class="period">/month</span>
              </div>
              <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.</p>
              <ul class="features-list">
                <li>
                  <i class="bi bi-check2"></i>
                  Vestibulum ante ipsum primis
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Fusce vulputate eleifend
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Nullam ac tortor vitae
                </li>
              </ul>
              <a href="#" class="btn-pricing">Buy Now</a>
            </div>
          </div><!-- End Basic Plan -->

          <!-- Professional Plan -->
          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="pricing-item featured">
              <div class="pricing-badge">Recommended</div>
              <div class="pricing-icon">
                <i class="bi bi-stars"></i>
              </div>
              <h3>Professional</h3>
              <div class="price">
                <span class="currency">$</span>29<span class="period">/month</span>
              </div>
              <p class="description">Maecenas tempus tellus eget condimentum rhoncus semper.</p>
              <ul class="features-list">
                <li>
                  <i class="bi bi-check2"></i>
                  Donec quam felis ultricies
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Aenean massa imperdiet
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Cras dapibus vivamus
                </li>
              </ul>
              <a href="#" class="btn-pricing">Buy Now</a>
            </div>
          </div><!-- End Professional Plan -->

          <!-- Ultimate Plan -->
          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="pricing-item">
              <div class="pricing-icon">
                <i class="bi bi-star-fill"></i>
              </div>
              <h3>Ultimate</h3>
              <div class="price">
                <span class="currency">$</span>49<span class="period">/month</span>
              </div>
              <p class="description">Etiam rhoncus maecenas tempus tellus eget condimentum.</p>
              <ul class="features-list">
                <li>
                  <i class="bi bi-check2"></i>
                  Phasellus viverra nulla
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Quisque rutrum aenean
                </li>
                <li>
                  <i class="bi bi-check2"></i>
                  Etiam ultricies nisi vel
                </li>
              </ul>
              <a href="#" class="btn-pricing">Buy Now</a>
            </div>
          </div><!-- End Ultimate Plan -->

        </div>

      </div>

    </section><!-- /Pricing Section -->

    <!-- Faq Section -->
    <section id="faq" class="faq section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Frequently Asked Questions</span>
        <h2>Frequently Asked Questions</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row align-items-start gy-4">
          <div class="col-lg-5" data-aos="fade-up" data-aos-delay="200">
            <div class="faq-sidebar">
              <div class="faq-image">
                <img src="assets/img/illustration/illustration-5.webp" alt="FAQ Image" class="img-fluid" loading="lazy">
              </div>
              <div class="contact-box">
                <h3><i class="bi bi-headset"></i> Need Assistance?</h3>
                <p>Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
                <a href="#" class="btn-contact">Connect with Support</a>
              </div>
            </div>
          </div>

          <div class="col-lg-7">
            <div class="faq-tabs">
              <ul class="nav nav-pills mb-4" id="faqTabs-faq" role="tablist" data-aos="fade-up" data-aos-delay="100">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="general-tab-faq" data-bs-toggle="pill" data-bs-target="#general-faq-faq" type="button" role="tab" aria-controls="general-faq-faq" aria-selected="true">General Inquiries</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="account-tab-faq" data-bs-toggle="pill" data-bs-target="#account-faq-faq" type="button" role="tab" aria-controls="account-faq-faq" aria-selected="false">Account Services</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="payment-tab-faq" data-bs-toggle="pill" data-bs-target="#payment-faq-faq" type="button" role="tab" aria-controls="payment-faq-faq" aria-selected="false">Billing &amp; Payments</button>
                </li>
              </ul>

              <div class="tab-content" id="faqTabsContent-faq">
                <div class="tab-pane fade show active" id="general-faq-faq" role="tabpanel" aria-labelledby="general-tab-faq">
                  <div class="accordion" id="generalAccordion-faq">
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="150">
                      <h3>How do I create a new account?</h3>
                      <div class="faq-content">
                        <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                      <h3>What are the system requirements?</h3>
                      <div class="faq-content">
                        <p>Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="250">
                      <h3>Can I access my data offline?</h3>
                      <div class="faq-content">
                        <p>Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="300">
                      <h3>How do I report a bug or issue?</h3>
                      <div class="faq-content">
                        <p>Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="350">
                      <h3>What is your data privacy policy?</h3>
                      <div class="faq-content">
                        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum. Sed porttitor lectus nibh.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->
                  </div>
                </div>

                <div class="tab-pane fade" id="account-faq-faq" role="tabpanel" aria-labelledby="account-tab-faq">
                  <div class="accordion" id="accountAccordion-faq">
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="150">
                      <h3>How do I reset my password?</h3>
                      <div class="faq-content">
                        <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                      <h3>How to update account information?</h3>
                      <div class="faq-content">
                        <p>Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->
                  </div>
                </div>

                <div class="tab-pane fade" id="payment-faq-faq" role="tabpanel" aria-labelledby="payment-tab-faq">
                  <div class="accordion" id="paymentAccordion-faq">
                    <div class="faq-item" data-aos="fade-up" data-aos-delay="150">
                      <h3>What payment methods are accepted?</h3>
                      <div class="faq-content">
                        <p>Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                      <h3>When will my payment be processed?</h3>
                      <div class="faq-content">
                        <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->

                    <div class="faq-item" data-aos="fade-up" data-aos-delay="250">
                      <h3>Can I get a refund for my purchase?</h3>
                      <div class="faq-content">
                        <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada.</p>
                      </div>
                      <i class="bi bi-chevron-down faq-toggle"></i>
                    </div><!-- End FAQ Item-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Faq Section -->

    <!-- Team Section -->
    <section id="team" class="team section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="team-header" data-aos="fade-up" data-aos-delay="200">
          <div class="row align-items-center">
            <div class="col-lg-6">
              <h2>Our Professional Team</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis pulvinar dapibus leo.</p>
            </div>
            <div class="col-lg-6 d-flex justify-content-lg-end">
              <div class="team-controls">
                <button class="team-control-btn team-prev"><i class="bi bi-chevron-left"></i></button>
                <button class="team-control-btn team-next"><i class="bi bi-chevron-right"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div class="team-slider swiper init-swiper" data-aos="fade-up" data-aos-delay="300">
          <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 700,
              "autoplay": {
                "delay": 5000
              },
              "slidesPerView": 1,
              "spaceBetween": 30,
              "navigation": {
                "nextEl": ".team-next",
                "prevEl": ".team-prev"
              },
              "breakpoints": {
                "576": {
                  "slidesPerView": 2,
                  "spaceBetween": 20
                },
                "992": {
                  "slidesPerView": 3,
                  "spaceBetween": 30
                },
                "1200": {
                  "slidesPerView": 4,
                  "spaceBetween": 30
                }
              }
            }
          </script>
          <div class="swiper-wrapper">

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-m-3.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Marcus Wilson</h3>
                  <span>Chief Technology Officer</span>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec.</p>
                </div>
              </div>
            </div><!-- End slide item -->

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-f-5.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Sophia Reynolds</h3>
                  <span>Product Designer</span>
                  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p>
                </div>
              </div>
            </div><!-- End slide item -->

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-m-8.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Daniel Chen</h3>
                  <span>Marketing Specialist</span>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                </div>
              </div>
            </div><!-- End slide item -->

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-f-9.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Olivia Thompson</h3>
                  <span>Lead Developer</span>
                  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
                </div>
              </div>
            </div><!-- End slide item -->

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-m-12.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Jason Parker</h3>
                  <span>UI/UX Designer</span>
                  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</p>
                </div>
              </div>
            </div><!-- End slide item -->

            <div class="swiper-slide">
              <div class="team-member">
                <div class="member-image">
                  <img src="assets/img/person/person-f-7.webp" class="img-fluid" alt="" loading="lazy">
                  <div class="member-social">
                    <a href="#"><i class="bi bi-twitter-x"></i></a>
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                  </div>
                </div>
                <div class="member-content">
                  <h3>Emily Rodriguez</h3>
                  <span>Project Manager</span>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
                </div>
              </div>
            </div><!-- End slide item -->

          </div>
        </div>

      </div>
    </section><!-- /Team Section -->

    <!-- Contact Section -->
    <section id="contact" class="contact section">
      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <span class="description-title">Contact</span>
        <h2>Contact</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
      </div><!-- End Section Title -->

      <div class="container">
        <div class="contact-wrapper">
          <div class="contact-info-panel">
            <div class="contact-info-header">
              <h3>Contact Information</h3>
              <p>Dignissimos deleniti accusamus rerum voluptate. Dignissimos rerum sit maiores reiciendis voluptate inventore ut.</p>
            </div>

            <div class="contact-info-cards">
              <div class="info-card">
                <div class="icon-container">
                  <i class="bi bi-pin-map-fill"></i>
                </div>
                <div class="card-content">
                  <h4>Our Location</h4>
                  <p>4952 Hilltop Dr, Anytown, CA 90210</p>
                </div>
              </div>

              <div class="info-card">
                <div class="icon-container">
                  <i class="bi bi-envelope-open"></i>
                </div>
                <div class="card-content">
                  <h4>Email Us</h4>
                  <p>info@example.com</p>
                </div>
              </div>

              <div class="info-card">
                <div class="icon-container">
                  <i class="bi bi-telephone-fill"></i>
                </div>
                <div class="card-content">
                  <h4>Call Us</h4>
                  <p>+1 (555) 123-4567</p>
                </div>
              </div>

              <div class="info-card">
                <div class="icon-container">
                  <i class="bi bi-clock-history"></i>
                </div>
                <div class="card-content">
                  <h4>Working Hours</h4>
                  <p>Monday-Saturday: 9AM - 7PM</p>
                </div>
              </div>
            </div>

            <div class="social-links-panel">
              <h5>Follow Us</h5>
              <div class="social-icons">
                <a href="#"><i class="bi bi-facebook"></i></a>
                <a href="#"><i class="bi bi-twitter-x"></i></a>
                <a href="#"><i class="bi bi-instagram"></i></a>
                <a href="#"><i class="bi bi-linkedin"></i></a>
                <a href="#"><i class="bi bi-youtube"></i></a>
              </div>
            </div>
          </div>

          <div class="contact-form-panel">
            <div class="map-container">
              <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48389.78314118045!2d-74.006138!3d40.710059!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sDowntown%20Conference%20Center!5e0!3m2!1sen!2sus!4v1676961268712!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>

            <div class="form-container">
              <h3>Send Us a Message</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipiscing elit mauris hendrerit faucibus imperdiet nec eget felis.</p>

              <form action="forms/contact.php" method="post" class="php-email-form">
                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="nameInput" name="name" placeholder="Full Name" required="">
                  <label for="nameInput">Full Name</label>
                </div>

                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="emailInput" name="email" placeholder="Email Address" required="">
                  <label for="emailInput">Email Address</label>
                </div>

                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="subjectInput" name="subject" placeholder="Subject" required="">
                  <label for="subjectInput">Subject</label>
                </div>

                <div class="form-floating mb-3">
                  <textarea class="form-control" id="messageInput" name="message" rows="5" placeholder="Your Message" style="height: 150px" required=""></textarea>
                  <label for="messageInput">Your Message</label>
                </div>

                <div class="my-3">
                  <div class="loading">Loading</div>
                  <div class="error-message"></div>
                  <div class="sent-message">Your message has been sent. Thank you!</div>
                </div>

                <div class="d-grid">
                  <button type="submit" class="btn-submit">Send Message <i class="bi bi-send-fill ms-2"></i></button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section><!-- /Contact Section -->

  </main>

  <footer id="footer" class="footer">

    <div class="container footer-top">
      <div class="row gy-4">
        <div class="col-lg-5 col-md-12 footer-about">
          <a href="index.html" class="logo d-flex align-items-center">
            <span class="sitename">Visible</span>
          </a>
          <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
          <div class="social-links d-flex mt-4">
            <a href=""><i class="bi bi-twitter-x"></i></a>
            <a href=""><i class="bi bi-facebook"></i></a>
            <a href=""><i class="bi bi-instagram"></i></a>
            <a href=""><i class="bi bi-linkedin"></i></a>
          </div>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Useful Links</h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Terms of service</a></li>
            <li><a href="#">Privacy policy</a></li>
          </ul>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Our Services</h4>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Product Management</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Graphic Design</a></li>
          </ul>
        </div>

        <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
          <h4>Contact Us</h4>
          <p>A108 Adam Street</p>
          <p>New York, NY 111111</p>
          <p>United States</p>
          <p class="mt-4"><strong>Phone:</strong> <span>+1 5589 55488 55</span></p>
          <p><strong>Email:</strong> <span>info@example.com</span></p>
        </div>

      </div>
    </div>

    <div class="container copyright text-center mt-4">
      <p>© <span>Copyright</span> <strong class="px-1 sitename">Visible</strong> <span>All Rights Reserved</span></p>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you've purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>

  </footer>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>